<script lang="ts" setup>
const menus = [
  { name: '首页', path: '/' },
  { name: 'tsx-demo', path: '/tsx-demo' },
  { name: '关于', path: '/about' },
  { name: '文章', path: '/posts/1' },
  { name: '文章', path: '/posts/2' },
  { name: '路由守卫-指定auth', path: '/dashboard' },
  { name: '数据请求', path: '/demo' },
  { name: 'async-data', path: '/demo/async-data' },
  { name: '状态管理', path: '/demo/status-manage' },
  { name: 'sub-status状态管理', path: '/demo/status-manage/sub-status' },
  { name: 'pinia状态管理', path: '/demo/pinia' },
  { name: '错误页面', path: '/posts' },
  { name: '显示错误页面', path: '/demo/error' },
  { name: '动态components', path: '/demo/components' },
  { name: '切换主题', path: '/demo/change-theme' },
  { name: '父子组件', path: '/demo/parent/parent/child' },
  { name: '基于 unjs/hookable事件系统hook', path: '/demo/hook' },
  { name: 'runtime-config', path: '/demo/runtime-config' },
  { name: 'api-components', path: '/demo/components/api-components' },
  { name: 'iconAndNuxtImg', path: '/demo/icon' },
  { name: 'nuxt-ui', path: '/demo/nuxt-ui' }
]
</script>

<template>
  <header>
    <nav class="flex align-center flex-wrap">
      <NuxtLink
        v-for="(menu, index) in menus"
        :key="index"
        :to="menu.path"
        class="mr-4 hover:text-[green] item"
      >
        {{ menu.name }}
      </NuxtLink>
    </nav>
  </header>
</template>
<style lang="scss" scoped>
/* .router-link-exact-active {
  color: red!important;
} */
.router-link-active {
  color: green !important; 
}
</style>

